<!-- eslint-disable no-undef -->
<script setup lang="ts">
import { reqLoginByQQ, reqBinding } from '@/services/user'
import { MobileRules, CodeRules } from '@/utils/rules'
import { useSendCode } from '@/composable'
import type { UserType } from '@/types/user'
import useStore from '@/stores'
import { showToast } from 'vant'
const isBind = ref(false)
const openId = ref('')
const mobile = ref('')
const { user } = useStore()
const router = useRouter()
// 验证码
const code = ref<string>('')
const { time, sendCode, formRef } = useSendCode(mobile, 'bindMobile')
onMounted(() => {
  // console.log(window.QC.Login.signOut()) // 退出QQ登录
  // console.log(window.QC.Login.check()) // 检测是否qq扫码登录成功
  if (window.QC.Login.check()) {
    window.QC.Login.getMe(async (id: string) => {
      console.log(id) // 就是openid
      openId.value = id
      try {
        // 验证openId是否在数据库中
        const res = await reqLoginByQQ({ openId: id, source: 'qq' })
        // console.log(res.data)
        // console.log('qq三方登录成功.直接跳转')
        loginSuccess(res.data)
      } catch {
        console.log('qq三方登录失败')
        // 展示页面结构让用户输入信息绑定手机号
        isBind.value = true
      }
    })
  }
})

// 绑定手机号登录
const loginByQQ = async () => {
  // 1. 携带手机号+验证码+openId绑定
  try {
    const res = await reqBinding({
      mobile: mobile.value,
      code: code.value,
      openId: openId.value
    })
    loginSuccess(res.data)
  } catch {
    console.log('绑定失败')
    showToast('绑定失败,请确认在该系统存在账号')
  }
}
/* 
登录 / 注册
1. 如果第一次访问某个平台, 需要登录/注册, 登录即注册 => 登录期间 填写手机号 填写验证码 填写你要设置的密码
2. 如果第一次访问某个平台 先去注册  注册完毕后再去登录页面登录 */
const loginSuccess = (u: UserType) => {
  showToast('绑定成功')
  // 2. 获取到个人信息存储下来
  user.setUser(u)
  // 3. 跳转到原来想去的页面 或者个人中心
  router.replace(user.backURL || '/user')
  // 4.登录完毕后清空backURL
  user.setbackURL('')
}
// 1. 点击qq按钮 将 backURL记录  存储到本地 / pinia
// 2. 扫码成功后 势必是会去 /login/callback页面
// 3. 就可以在login/callback中 获取之前存储的backURL
</script>
<template>
  <div class="login-page" v-if="isBind">
    <cp-nav-bar></cp-nav-bar>
    <div class="login-head">
      <h3>手机绑定</h3>
    </div>
    <van-form autocomplete="off" ref="formRef" @submit="loginByQQ">
      <van-field
        v-model="mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="MobileRules"
      ></van-field>
      <van-field
        :rules="CodeRules"
        v-model="code"
        name="code"
        placeholder="请输入验证码"
      >
        <template #button>
          <span class="btn-send" @click="sendCode" :class="{ active: time }">{{
            time > 0 ? ` ${time}s后发送` : '发送验证码'
          }}</span>
        </template>
      </van-field>
      <div class="cp-cell">
        <van-button
          style="margin-top: 50px"
          block
          round
          type="primary"
          native-type="submit"
        >
          立即绑定
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
